<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="props.dialogVisible"
      :title="`选择我的兴趣技能&nbsp;&nbsp;&nbsp;&nbsp${avocationForm.selectedAvocationList.length}/7`"
      :style="{ width: '1024px' }"
    >
      <el-form
        :inline="true"
        :model="avocationForm.avocationList"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-input
            prefix-icon="ele-Search"
            v-model="avocationForm.search"
            placeholder="搜索兴趣技能"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 已选择 兴趣技能 -->
      <div class="select-avocation">
        <div class="tag-list">
          <div
            class="tag-item"
            v-for="item in avocationForm.selectedAvocationList"
          >
            <span>{{ item.name }}</span>

            <Close @click="remove(item)" class="icon-style-close" />
          </div>
        </div>
      </div>

      <!-- 推荐兴趣技能 -->
      <div class="avocation-wrapper">
        <span class="button">推荐兴趣技能</span>
        <div class="avocation">
          <div
            class="tag-list infinite-list"
            v-infinite-scroll="load"
            style="overflow: auto"
          >
            <div
              class="tag-item"
              v-for="item in avocationForm.avocationList"
              @click="select(item)"
              :key="item.id"
            >
              <span>{{ item.name }}</span>
              <CircleCheck v-show="item.isSelected" class="selected-item" />
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('handleDialog')" class="first"
            >取消</el-button
          >
          <el-button type="primary" @click="confirmSelect" class="last">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Close, CircleCloseFilled, CircleCheck } from '@element-plus/icons-vue';

export default defineComponent({
  name: '',
  components: { Close, CircleCloseFilled, CircleCheck },
});
</script>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { getAvocationsApi } from '@/api/public/index';
import { useMineStore } from '@/store/mine/mine';
import type { Content } from '@/api/public/interface/avocation';
const props = defineProps(['dialogVisible']);
const emit = defineEmits(['handleDialog']);
watch(
  () => props.dialogVisible,
  (val) => {
    console.log('dialogVisible', val);
  }
);
const mineStore = useMineStore();
const { setSelectedAvocationList } = mineStore;

interface defalutType {
  search: string;
  number: number;
  pageSize: number;
  avocationList: Content[];
  selectedAvocationList: Content[];
}
// form 收集数据
const avocationForm = ref<defalutType>({
  search: '',
  number: 0,
  pageSize: 20,
  avocationList: [],
  selectedAvocationList: [],
});

// 获取兴趣列表 异步函数
const getAvocationList = async (number: number, pageSize: number) => {
  try {
    const result = await getAvocationsApi(number, pageSize);
    console.log('getAvocationList result', result);
    avocationForm.value.avocationList = [
      ...avocationForm.value.avocationList,
      ...result.content,
    ];
    // set flag
    avocationForm.value.avocationList.forEach((item) => {
      item.isSelected = false;
    });
    // 请求过一次后下次请求下一页数据
    avocationForm.value.number++;
  } catch (error) {}
};
onMounted(async () => {
  try {
    // 初始化请求
    getAvocationList(avocationForm.value.number, avocationForm.value.pageSize);
  } catch (error) {}
});
const load = () => {
  console.log('获取下一页列表数据');
  getAvocationList(avocationForm.value.number, avocationForm.value.pageSize);
};
// 添加兴趣
const select = (item: Content) => {
  // 逻辑判断
  // 1.不能重复添加相同
  let flag = false;

  avocationForm.value.selectedAvocationList.forEach((i) => {
    if (i.id === item.id) {
      console.log('xiangtong', i.id);
      flag = true;
      return;
    } else {
    }
  });
  // 最多添加7个
  if (avocationForm.value.selectedAvocationList.length === 7) {
    console.log('超过7个');
    return;
  }
  if (!flag) {
    item.isSelected = true;
    avocationForm.value.selectedAvocationList.push(item);
  }
};
// 移除已选择兴趣
const remove = (item: Content) => {
  console.log('remove', item);
  avocationForm.value.selectedAvocationList =
    avocationForm.value.selectedAvocationList.filter((i) => {
      return i.id !== item.id;
    });
  avocationForm.value.avocationList.forEach((i) => {
    if (i.id === item.id) {
      i.isSelected = false;
    }
  });
};
// 点击确定 收集兴趣列表选中数据
const confirmSelect = () => {
  // 关闭弹窗
  emit('handleDialog');
  setSelectedAvocationList(avocationForm.value.selectedAvocationList);
};
</script>

<style lang="less" scoped>
.button {
  margin-bottom: 10px;
}

.tag-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  .tag-item {
    position: relative;
    min-width: 100px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #eaecf0;
    color: #111;
    background-color: #fff;
    cursor: pointer;
    margin: 0 22px 21px 0;
    display: inline-block;
    font-size: 12px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    .selected-item {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #f7327d;
      color: #fff;
      top: -1px;
      right: -5px;
    }
  }
  .tag-item-selected {
    background-color: #ff8fbc;
  }
}

.icon-style-close {
  width: 15px;
  position: relative;
  left: 30px;
  top: -15px;
  background-color: #b1b5c1;
  color: #fff;
  border-radius: 10px;
}

// 滚动列表
.infinite-list {
  height: 200px;
  padding: 0;
  margin-top: 20px;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.dialog-footer {
  button {
    padding: 20px 40px;
    margin-right: 10px;
  }
    .first {
    color: #737478;
    background-color: #fff;
  }
  .first:hover {
    color: aliceblue;
    background-color: #ffd3e5;
    border: 1px solid #ea8db0;
  }
  .last {
    color: aliceblue;
    background-color: #ff619e;
    border: 1px solid #ea8db0;
  }
    .last:hover {
    border: 1px solid #ea8db0;
  }
}
</style>
